<template>
	<view class="container">
		<!-- 顶部标题栏 -->
		<view class="header">
			<view class="header-left">
				<text class="app-icon">🎓</text>
				<text class="app-title">阅卷</text>
			</view>
			<view class="header-right">
				<text class="menu-icon">⋯</text>
				<text class="setting-icon">⊙</text>
			</view>
		</view>

		<!-- 搜索框 -->
		<view class="search-container">
			<view class="search-box">
				<text class="search-placeholder">请输入考试项目名称搜索</text>
				<text class="search-icon">🔍</text>
			</view>
		</view>

		<!-- 任务卡片列表 -->
		<view class="task-list">
			<!-- 第一个任务 - 未阅卷 -->
			<view class="task-card">
				<view class="card-header">
					<view class="task-info">
						<view class="task-icon-wrapper">
							<view class="task-icon orange-bg">
								<text class="icon-text">📄</text>
							</view>
							<text class="task-status">未阅卷</text>
						</view>
						<view class="task-details">
							<text class="task-title">2024-2025年上学期九年级3月第一次模考</text>
							<text class="task-time">时间：2024-11-19</text>
						</view>
					</view>
					<button class="mark-btn">我要阅卷 ></button>
				</view>
				
				<view class="stats-row">
					<view class="stat-item">
						<text class="stat-number teal">500</text>
						<text class="stat-label">题块数量</text>
					</view>
					<view class="stat-item">
						<text class="stat-number orange">1050</text>
						<text class="stat-label">任务总量</text>
					</view>
					<view class="stat-item">
						<text class="stat-number blue">78.50%</text>
						<text class="stat-label">考试进度</text>
					</view>
				</view>
				
				<view class="action-row">
					<button class="detail-btn" @click="goToDetail('2024-2025年上学期九年级3月第一次模考')">📄 阅卷详情</button>
				</view>
			</view>

			<!-- 第二个任务 - 阅卷中 -->
			<view class="task-card">
				<view class="card-header">
					<view class="task-info">
						<view class="task-icon-wrapper">
							<view class="task-icon blue-bg">
								<text class="icon-text">🔍</text>
							</view>
							<text class="task-status">阅卷中</text>
						</view>
						<view class="task-details">
							<text class="task-title">2024-2025年上学期九年级3月第一次模考</text>
							<text class="task-time">时间：2024-11-19</text>
						</view>
					</view>
					<button class="mark-btn">我要阅卷 ></button>
				</view>
				
				<view class="stats-row">
					<view class="stat-item">
						<text class="stat-number teal">500</text>
						<text class="stat-label">题块数量</text>
					</view>
					<view class="stat-item">
						<text class="stat-number orange">1050</text>
						<text class="stat-label">任务总量</text>
					</view>
					<view class="stat-item">
						<text class="stat-number blue">78.50%</text>
						<text class="stat-label">考试进度</text>
					</view>
				</view>
				
				<view class="action-row">
					<button class="detail-btn" @click="goToDetail('2024-2025年上学期九年级3月第一次模考')">📄 阅卷详情</button>
					<button class="arbitrate-btn">📋 我要仲裁(100)</button>
				</view>
			</view>

			<!-- 第三个任务 - 已阅卷 -->
			<view class="task-card">
				<view class="card-header">
					<view class="task-info">
						<view class="task-icon-wrapper">
							<view class="task-icon green-bg">
								<text class="icon-text">📄</text>
							</view>
							<text class="task-status">已阅卷</text>
						</view>
						<view class="task-details">
							<text class="task-title">2024-2025年上学期九年级3月第一次模考</text>
							<text class="task-time">时间：2024-11-19</text>
						</view>
					</view>
					<button class="mark-btn">我要阅卷 ></button>
				</view>
				
				<view class="stats-row">
					<view class="stat-item">
						<text class="stat-number teal">500</text>
						<text class="stat-label">题块数量</text>
					</view>
					<view class="stat-item">
						<text class="stat-number orange">1050</text>
						<text class="stat-label">任务总量</text>
					</view>
					<view class="stat-item">
						<text class="stat-number blue">78.50%</text>
						<text class="stat-label">考试进度</text>
					</view>
				</view>
				
				<view class="action-row">
					<button class="detail-btn" @click="goToDetail('2024-2025年上学期九年级3月第一次模考')">📄 阅卷详情</button>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
export default {
	data() {
		return {
			
		}
	},
	methods: {
		goToDetail(taskTitle) {
			console.log('跳转到详情页:', taskTitle);
			uni.navigateTo({
				url: '/pages/marking/detail',
				success: function(res) {
					console.log('跳转成功');
				},
				fail: function(err) {
					console.log('跳转失败:', err);
				}
			});
		}
	}
}
</script>

<style lang="less" scoped>
.container {
	min-height: 100vh;
	background: linear-gradient(180deg, #4DD0E1 0%, #A5D6A7 100%);
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 40rpx 30rpx 20rpx;
}

.header-left {
	display: flex;
	align-items: center;
	gap: 15rpx;
}

.app-icon {
	font-size: 40rpx;
}

.app-title {
	font-size: 36rpx;
	font-weight: bold;
	color: white;
}

.header-right {
	display: flex;
	gap: 20rpx;
}

.menu-icon, .setting-icon {
	font-size: 32rpx;
	color: white;
}

.search-container {
	padding: 0 30rpx 30rpx;
}

.search-box {
	background: white;
	border-radius: 50rpx;
	padding: 25rpx 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.search-placeholder {
	font-size: 28rpx;
	color: #999;
}

.search-icon {
	color: #4DD0E1;
	font-size: 28rpx;
}

.task-list {
	padding: 0 30rpx;
}

.task-card {
	background: white;
	border-radius: 20rpx;
	margin-bottom: 30rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 30rpx;
}

.task-info {
	display: flex;
	gap: 20rpx;
	flex: 1;
}

.task-icon-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
}

.task-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
}

.task-status {
	font-size: 22rpx;
	color: #666;
}

.orange-bg {
	background: #FFF3E0;
}

.blue-bg {
	background: #E3F2FD;
}

.green-bg {
	background: #E8F5E8;
}

.task-details {
	flex: 1;
}

.task-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	line-height: 1.4;
	display: block;
	margin-bottom: 8rpx;
}



.task-time {
	font-size: 24rpx;
	color: #999;
	display: block;
}

.mark-btn {
	background: #4DD0E1;
	color: white;
	border: none;
	padding: 15rpx 25rpx;
	border-radius: 25rpx;
	font-size: 26rpx;
	white-space: nowrap;
}

.stats-row {
	display: flex;
	justify-content: space-around;
	margin-bottom: 30rpx;
	padding: 20rpx 0;
}

.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
}

.stat-number {
	font-size: 48rpx;
	font-weight: bold;
	margin-bottom: 8rpx;
}

.stat-number.teal {
	color: #26A69A;
}

.stat-number.orange {
	color: #FF9800;
}

.stat-number.blue {
	color: #2196F3;
}

.stat-label {
	font-size: 24rpx;
	color: #666;
}

.action-row {
	display: flex;
	gap: 20rpx;
}

.detail-btn {
	background: white;
	color: #4DD0E1;
	border: 2rpx solid #4DD0E1;
	padding: 25rpx;
	border-radius: 12rpx;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8rpx;
	flex: 1;
}

.arbitrate-btn {
	background: #FFE0B2;
	color: #FF9800;
	border: none;
	padding: 25rpx;
	border-radius: 12rpx;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8rpx;
	flex: 1;
}
</style>